<template>
	<div class="header">
		<span class="iconfont">&#xe667;</span><p><i class="iconfont">&#xe6cf;</i>输入城市/景点/游玩主题</p>
		<router-link to='/city' tag='span'><span class="iconfont">{{cityName}}&#xe6aa;</span></router-link>
	</div>
</template>
<script>
	import {mapState} from 'vuex'

	export default{
		computed:{
			...mapState(['cityName'])
		},
	}
</script>
<style scoped lang='stylus'>
@import '~@/assets/css/var.styl'
.header{
	width: 100%;
	display: flex;
	background:#00bcd4;
	height:44px;
	align-items:center;
	font-size:14px;
	span{
		padding:0 8px;
		color: #fff;
	}
	p{
		flex:1;
		background: #fff;
		padding: 7px 0;
		color: #bbb;
		font-size: 16px;
		border-radius: 5px;
		i{
			font-size: 18px;
			padding:0 8px;
		}
	}
}
</style>